<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom: 20px;" @click="createRole">新增角色</el-button>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="角色组">
        <template slot-scope="scope">
          <el-input v-model="scope.row.role" :placeholder="scope.row.role" v-if="scope.row.editable"></el-input>
          <span v-else>
            {{ scope.row.role }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="用户管理" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.user" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.user?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="管理员管理" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.admin" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.admin?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="服务器管理" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.server" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.server?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="应用管理" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.application" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.application?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="系统管理" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.systyem" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.systyem?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="统计" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.statistics" placeholder="请选择" v-if="scope.row.editable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-icon :name="scope.row.statistics?'check':'close'" v-else></el-icon>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <div class="button-wrapper" v-if="scope.row.editable">
            <el-button
              size="small"
              type="success"
              @click="handleConfirm(scope.$index, scope.row)">
              确认
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleCancel(scope.$index, scope.row)">
              取消
            </el-button>
          </div>
          <div class="button-wrapper" v-else>
            <el-button
              size="small"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope)">
              删除
            </el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除&nbsp;<b>{{selectedRole.data.role || ''}}</b>&nbsp;角色吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            role: '普通用户',
            roleId: 'user',
            user: true,
            admin: false,
            server: false,
            application: true,
            systyem: false,
            statistics: false,
            editable: false
          },
          {
            role: '管理员',
            roleId: 'admin',
            user: true,
            admin: true,
            server: true,
            application: true,
            systyem: true,
            statistics: true,
            editable: false
          },
          {
            role: '游客',
            roleId: 'visitor',
            user: true,
            admin: false,
            server: true,
            application: false,
            systyem: false,
            statistics: false,
            editable: false
          },
        ],
        value: '',
        input2: '',
        options: [
          {
            value: true,
            label: '允许'
          },
          {
            value: false,
            label: '不允许'
          }
        ],
        selectedRole: {
          index: '',
          data: ''
        },
        dialogVisible: false
      }
    },
    methods: {
      handleIconClick(ev) {
        console.log(ev)
      },
      handleConfirm(index, row){
        row.editable = false
      },
      handleCancel(index, row){
        row.editable = false
      },
      handleEdit(index, row) {
        row.editable = true
      },
      handleDelete(scope) {
        this.dialogVisible = true
        this.selectedRole.index = scope.$index
        this.selectedRole.data = scope.row
      },
      deleteRole(){
        this.tableData.splice(this.selectedRole.index, 1)
        this.dialogVisible = false
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      },
      createRole(){
        this.tableData.push({
          role: '游客',
          roleId: 'visitor',
          user: false,
          admin: false,
          server: false,
          application: false,
          systyem: false,
          statistics: false,
          editable: true
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    i.el-icon-check{
      color: #1D8CE0;
    }
    i.el-icon-close{
      color: #ff4949;
    }
  }
</style>
